<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="接口ID" prop="apiId">
        <el-input
          v-model="queryParams.apiId"
          placeholder="请输入接口ID"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="接口名称" prop="apiName">
        <el-input
          v-model="queryParams.apiName"
          placeholder="请输入接口名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="接口路径" prop="path">
        <el-input
          v-model="queryParams.path"
          placeholder="请输入接口路径"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户名称" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="请求状态" prop="success">
        <el-select
          v-model="queryParams.success"
          placeholder="请选择请求状态"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="dict in successConstDict"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="权限校验" prop="noPermission">
        <el-select
          v-model="queryParams.noPermission"
          placeholder="请选择权限校验"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="dict in noPermissionConstDict"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否缓存" prop="cached">
        <el-select
          v-model="queryParams.cached"
          placeholder="请选择是否缓存"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="dict in cachedConstDict"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否限流" prop="limited">
        <el-select
          v-model="queryParams.limited"
          placeholder="请选择是否限流"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="dict in limitedConstDict"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="数据量" prop="returnSize">
        <el-input
          v-model="queryParams.returnSize"
          placeholder="请输入数据量"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="调用时间" prop="ts">
        <el-date-picker
          v-model="tsTimeRange"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          style="width: 260px"
          @change="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="接口ID" align="center" prop="apiId" />
      <el-table-column label="接口名称" align="center" prop="apiName" show-overflow-tooltip />
      <el-table-column label="接口路径" align="center" prop="path" show-overflow-tooltip />
      <el-table-column label="用户名称" align="center" prop="userName" />
      <el-table-column label="请求状态" align="center" prop="success">
        <template #default="scope">
          <dict-tag :options="successConstDict" :value="scope.row.success" />
        </template>
      </el-table-column>
      <el-table-column label="权限校验" align="center" prop="noPermission">
        <template #default="scope">
          <dict-tag :options="noPermissionConstDict" :value="scope.row.noPermission" />
        </template>
      </el-table-column>
      <el-table-column label="是否缓存" align="center" prop="cached">
        <template #default="scope">
          <dict-tag :options="cachedConstDict" :value="scope.row.cached" />
        </template>
      </el-table-column>
      <el-table-column label="是否限流" align="center" prop="limited">
        <template #default="scope">
          <dict-tag :options="limitedConstDict" :value="scope.row.limited" />
        </template>
      </el-table-column>
      <el-table-column label="错误信息" align="center" prop="errorMsg">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="handleViewErrorMsg(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="错误详情" align="center" prop="errorDetail">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="handleViewErrorDetail(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="数据量" align="center" prop="returnSize" />
      <el-table-column label="调用时间" align="center" prop="ts" width="180" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="pageParams.pageNum"
      v-model:limit="pageParams.pageSize"
      @pagination="getList"
    />

    <el-dialog v-model="detailShow" :title="detailTitle" width="700px" append-to-body>
      <CodeEditor v-model:value="detailContent" />
    </el-dialog>
  </div>
</template>

<script setup name="ApiLog">
  import { ref } from 'vue';
  import { pageApiLog } from '@/api/web/db/api/api-log';
  import { useConstDict } from '@/utils/dict';
  import { addFieldTimeRange } from '@/utils/base';
  import { CodeEditor } from '@/components/CodeEditor';

  const successConstDict = useConstDict('successConstDict', 'true=请求成功,false=请求失败');
  const noPermissionConstDict = useConstDict('noPermissionConstDict', 'true=无权限,false=有权限');
  const cachedConstDict = useConstDict('cachedConstDict', 'true=是,false=否');
  const limitedConstDict = useConstDict('limitedConstDict', 'true=是,false=否');

  const queryRef = ref(null);
  const pageParams = ref({
    pageNum: 1,
    pageSize: 10,
  });
  const queryParams = ref({
    apiId: null,
    apiName: null,
    path: null,
    userName: null,
    success: null,
    noPermission: null,
    cached: null,
    limited: null,
    errorMsg: null,
    errorDetail: null,
    returnSize: null,
    ts: null,
  });
  const tsTimeRange = ref([]);
  const list = ref([]);
  const loading = ref(false);
  const showSearch = ref(true);
  const total = ref(0);

  const detailShow = ref(false);
  const detailContent = ref('');
  const detailTitle = ref('');

  function getList() {
    loading.value = true;
    pageApiLog(pageParams.value, addFieldTimeRange(queryParams.value, tsTimeRange.value, 'ts'))
      .then((res) => {
        list.value = res?.data?.records ?? [];
        total.value = res?.data?.total ?? 0;
      })
      .finally(() => {
        loading.value = false;
      });
  }

  function handleQuery() {
    pageParams.value.pageNum = 1;
    getList();
  }

  function resetQuery() {
    tsTimeRange.value = [];
    queryRef.value?.resetFields();
    handleQuery();
  }

  function handleViewErrorMsg(row) {
    detailContent.value = row.errorMsg;
    detailTitle.value = '查看错误信息';
    detailShow.value = true;
  }

  function handleViewErrorDetail(row) {
    detailContent.value = row.errorDetail;
    detailTitle.value = '查看错误详情';
    detailShow.value = true;
  }

  getList();
</script>
